<template>
  <base-page-view class-name="page-container">
    <view class="sudoku">
      <no-more v-if="!drawData" noDataTxt="暂无数据"></no-more>
      <view class="main" v-if="drawData">
        <!-- 图片预加载 -->
        <view class="preload1"></view>
        <view class="preload2"></view>
        <url-image src="/static/images/activity/lottery/v2/rule.png" class="rule-img" :back_img="false" :width="197" :height="75" @click="ruleShow()"></url-image>
        <view class="zp-box">
          <view class="zp-bk" :class="{'lampShow':lampShow}">
            <view class="title-box">
              <view class="lottery-number">您还有{{drawNum}}次抽奖次数</view>
              <view class="jiang-li" @click="goMyAward">我的奖励</view>
            </view>
            <view class="cj-box">
              <view class="prize-box">
                <view v-for="(item, i) in list" class="prize"
                  :key="i" :class="['prize' + i, { 'active': i === index }]"
                >
                  <image :src="item.prizePicture" alt class="img" mode=""/>
                  <view class="name">{{item.prizeName}}</view>
                </view>
                <view :class="{'start-btn':true,'active':startDraw}" @click="start"></view>
              </view>
            </view>
          </view>
        </view>
        <view class="winner-box" v-show="people>0">
          <view class="title-box">已有<text class="people">{{people}}</text>人参与抽奖</view>
          <view class="winner-list">
            <view class="winner-swiper" v-if="winnerList&&winnerList.length<4">
              <view v-for="(item,index) in winnerList" :key="index" class="swiper-item swiper-box">
                <view class="left">{{item.userTitle}}</view>
                <view class="right">{{item.prizeTitle}}</view>
              </view>
            </view>
            <!-- 数量低于swiper设置的同时显示数量会不显示 -->
            <swiper v-else class="winner-swiper" autoplay :interval="3000" vertical circular :display-multiple-items="4">
              <swiper-item v-for="(item, index) in winnerList" :key="index">
                <view class="swiper-item">
                  <view class="left">{{item.userTitle}}</view>
                  <view class="right">{{item.prizeTitle}}</view>
                </view>
              </swiper-item>
            </swiper>
          </view>
        </view>
        <view class="popup-content">
          <!-- 抽奖机会用完 -->
          <view class="popup" v-show="popup.chance">
            <view class="popup-bg"></view>
            <view class="popup-box chance-box">
              <view class="title">抽奖机会已用完，完成任务可以获得抽奖机会哦~</view>
              <view class="btn-box">
                <view class="btn purple" @click="popup.chance=false;ruleShow();">查看规则</view>
                <view class="btn btn2" @click="popup.chance=false;">确认关闭</view>
              </view>
            </view>
          </view>
          <!-- 活动规则 -->
          <view class="popup" v-show="popup.rule">
            <view class="popup-bg"></view>
            <view class="popup-box rule-box">
              <url-image src="/static/images/activity/lottery/v2/close.png" class="close" :back_img="false" :width="42" :height="42" @click="popup.rule=false"></url-image>
              <view class="title-box">
                <url-image src="/static/images/activity/lottery/v2/xian.png" class="tip" :back_img="false" :width="24" :height="16"></url-image>
                <view class="title">活动规则</view>
                <url-image src="/static/images/activity/lottery/v2/xian.png" class="tip" :back_img="false" :width="24" :height="16"></url-image>
              </view>
              <view class="rule-txt">{{drawData.activityRule}}</view>
            </view>
          </view>
          <!-- 活动开始结束 -->
          <view class="popup" v-show="popup.unStart||popup.end">
            <view class="popup-bg"></view>
            <view class="popup-box start-end" v-if="popup.unStart">
              <view class="title">活动即将开始，敬请关注</view>
              <view class="btn-box">
                <view class="btn purple" @click="popup.unStart=false;">确认</view>
              </view>
            </view>
            <view class="popup-box start-end" v-if="popup.end">
              <view class="title">活动已结束，感谢您的参与</view>
              <view class="btn-box">
                <view class="btn purple" @click="popup.end=false;">确认</view>
              </view>
            </view>
          </view>
          <!-- 系统升级 -->
          <view class="popup" v-show="popup.system">
            <view class="popup-bg"></view>
            <view class="popup-box system-box">
              <url-image src="/static/images/activity/lottery/v2/close.png" class="close" :back_img="false" :width="42" :height="42" @click="popup.system=false"></url-image>
              <url-image src="/static/images/activity/lottery/v2/pic.png" class="tip" :back_img="false" :width="413" :height="305"></url-image>
              <view class="title">请求服务超时，稍后再试</view>
            </view>
          </view>
          <!-- 中奖、未中奖 -->
          <view class="popup" v-show="popup.award">
            <view class="popup-bg"></view>
            <view class="win-losing">
              <url-image src="/static/images/activity/lottery/v2/close.png" class="close" :back_img="false" :width="42" :height="42" @click="popup.award=false;"></url-image>
              <view class="title-box">{{prize_data.prizeType==='THANK'?'差一点点就中了':'恭喜你'}}</view>
              <view class="goods-box">
                <view class="goods-item">
                  <url-image :src="prize_data.prizePicture" :back_img="false" :width="160" :height="100"></url-image>
                  <view class="good-title">{{prize_data.prizeName}}</view>
                  <template v-if="prize_data.prizeType">
                    <!-- 谢谢惠顾 -->
                    <view class="btn-box purple" v-if="prize_data.prizeType==='THANK'" @click="popup.award=false;start()">再抽一次</view>
                    <!-- 优惠券 -->
                    <view class="btn-box purple" v-else-if="prize_data.prizeType==='COUPON'" @click="goDetail()">立即查看</view>
                    <!-- 现金 -->
                    <view class="btn-box purple" v-else-if="prize_data.prizeType==='CASH'" @click="goDetail()">立即查看</view>
                    <!-- 红包 -->
                    <view class="btn-box purple" v-else-if="prize_data.prizeType==='HONG_BAO'" @click="goDetail()">立即查看</view>
                    <!-- 其他 -->
                    <view class="btn-box purple" v-else="prize_data.prizeType==='OTHER'">
                      联系客服获取
                      <b-open-type open-type="contact"/>
                    </view>
                  </template>
                </view>
              </view>
              <!-- <view class="time-box" v-if="prize_data.startUserTime||prize_data.endUserTime">使用时间：{{prize_data.startUserTime}}-{{prize_data.endUserTime}}</view> -->
            </view>
          </view>
        </view>
      </view>
    </view>
  </base-page-view>
</template>

<script>
  import { h5NavigateTo } from '@/utils/navigateTo'
  export default {
    data() {
      return {
        //奖品列表
        list: [],
        drawNum:0,//限制每天抽奖次数，接口返回
        index: "", // 当前转动到哪个位置，第一次起点位置0,对应页面item1位置
        site: 8, // 总共有多少个位置
        count: 0, // 转动跑格子次数,
        cycle: 60, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
        speed: 200, // 转动速度
        lampShow:false,//开始抽奖，灯光闪烁
        lamp:0, // 灯光定时器
        timer: 0, // 转动定时器
        prize: "", // 中奖位置，接口返回
        prize_data: {//中奖信息
          // couponActivityId:'',//优惠券活动ID
          // couponName:'',//优惠卷名称
          // endUserTime:'',//结束使用期限时间
          // prizeId:'',//奖励id
          // prizeName:'',//奖品名称
          // prizePicture:'',//奖品图片
          // prizeType:'',//奖品类型:
          // // HONG_BAO("HONG_BAO", "红包"),
          // // GOODS("GOODS", "商品"),
          // // COUPON("COUPON", "优惠券"),
          // // CASH("CASH", "现金"),
          // // RANK("RANK", "排行奖池"),
          // // OTHER("OTHER", "其他"),
          // // THANK("THANK", "谢谢参与");
          // sort:'',//排序
          // startUserTime:'',//开始使用期限时间
        },
        cutTurns:2,//至少转动多少圈开始减速
        startDraw:false,//是否开始抽奖
        startSpeed:120,//初始转动速度
        startTimes:'',//转动开始时间戳
        miniTimes:3000,//抽奖最小时间
        maxTimes:10000,//抽奖最大时间
        popup:{
          rule:false,//活动规则弹窗
          chance:false,//抽奖机会用完弹窗
          unStart:false,//活动即将开始
          end:false,//活动结束
          system:false,//系统升级
          award:false,//奖品弹窗
        },
        people:0,//中奖人数
        winnerList:[],//中奖者列表
        drawData:"",//抽奖配置
      }
    },
    onShow() {
      this.getDrawList();
    },
    onPullDownRefresh() {
      this.getDrawList();
    },
    methods: {
      //立即查看
      goDetail(){
        if(this.prize_data.prizeType==='COUPON'){
          this.$navigateTo('/pagesMine/coupon/index')
        }else if(this.prize_data.prizeType==='CASH'){
          this.$navigateTo('/pagesEarnings/balance/detail')
        }else if(this.prize_data.prizeType==='HONG_BAO'){
          this.$navigateTo('/pagesMine/my-red-packets/index?active=1')
        }
        this.popup.award=false;
      },
      //我的奖励
      goMyAward(){
        if(!this.token){
          this.$navigateTo('/pages/login/index');
          return;
        }else{
          this.$navigateTo('/pagesActivity/lottery/myAward?activityId='+this.drawData.activityId);
        }
      },
      //规则显示
      ruleShow(){
        if(this.drawData.urlAddr){
          h5NavigateTo(this.drawData.urlAddr);
        }else{
          this.popup.rule=true;
        }
      },
      //获取奖品列表
      async getDrawList(){
        let res = await this.$api.activityApi.drawConfig({
          userId:this.userInfo.uid
        });
        if(res.code===0){
          this.drawData=res.data;
          let data=res.data;
          uni.setNavigationBarTitle({
              title: data.luckDrawTitle
          });
          this.getDrawRecord();
          this.list=data.prizeItemList;
          this.drawNum=data.drawNum;
          // if(data.activityStatus==='unStart'){//抽奖未开始
          //   this.popup.unStart=true;
          // }
          // if(data.activityStatus==='end'){//抽奖未开始
          //   this.popup.end=true;
          // }
        }
        setTimeout(function() {
          uni.stopPullDownRefresh()
        }, 500)
      },
      //获取抽奖记录
      async getDrawRecord(){
        let res = await this.$api.activityApi.drawRecord({
          activityId:this.drawData.activityId,
          userId:this.userInfo.uid
        });
        if(res.code===0){
          this.people=res.data.joinedNum;
          this.winnerList=res.data.awardUsers;
        }
      },
      //获取抽奖结果
      async getDrawResults(){
        this.prize=""; // 中奖位置，接口返回
        this.prize_data={};//抽奖结果
        await this.$api.activityApi.drawResult({
          activityId:this.drawData.activityId,
          userId:this.userInfo.uid
        }).then(res=>{
          if(res.code===0){
            this.drawNum=res.data.drawNum;
            this.prize=this.list.findIndex(x=>x.prizeId==res.data.prizeId);
            this.prize_data=this.list[this.prize];
          }
        }).catch(err=>{
          console.log(err);
          this.clear();
          this.index = "";
          this.popup.system=true;//系统错误弹窗
        });
      },
      //点击开始抽奖
      start() {
        if(!this.token){
          this.$navigateTo('/pages/login/index');
          return;
        }
        if(this.drawData.activityStatus==='unStart'){//抽奖未开始
          this.popup.unStart=true;
          return;
        }
        if(this.drawData.activityStatus==='end'){//抽奖未开始
          this.popup.end=true;
          return;
        }
        if(this.startDraw){
          this.$msg('正在抽奖中，请勿重复点击')
        }
        else if(this.drawNum == 0){
          this.popup.chance=true;
        }
        else{
          this.getDrawResults();
          this.speed = this.startSpeed;//抽奖速度初始化
          this.startTimes=new Date().getTime();//当前抽奖开始时间
          this.startRoll();//执行抽奖
          this.lamp = setInterval(()=>{//灯光闪烁开启
            this.lampShow = !this.lampShow;
          },100)
        }
      },
      // 开始转动
      startRoll() {
        this.startDraw=true;
        this.count += 1; // 转动次数
        this.oneRoll(); // 转动过程调用的每一次转动方法，这里是第一次调用初始化
        this.usePrize();
      },
      // 每一次转动
      oneRoll() {
        let index = this.index; // 当前转动到哪个位置
        const site = 8; // 总共有多少个位置
        index += 1;
        if (index > site - 1) {
            index = 0;
        }
        this.index = index;
      },
      usePrize() {
        let newTime=new Date().getTime();
        let times= newTime-this.startTimes;//当前时间减去开始时间
        if(this.miniTimes<times && times<this.maxTimes && this.prize_data.prizeType){
          this.cycle=this.count;
        }
        // 如果转动时间大于3秒小于10秒 && 获取到抽奖商品 && 目前转到的位置是中奖位置
        if (this.miniTimes<times && times<this.maxTimes && this.prize_data.prizeType && this.prize === this.index) {
          this.clear();
          this.popup.award=true;
        }else if(times>this.maxTimes){
          this.clear();
          this.index = "";
          this.popup.system=true;
          console.log('抽奖超时');
        } else {
          if(Math.floor(this.count/this.site) < this.cutTurns ){
              this.speed -= 4; // 加快转动速度
              if(this.speed<90){
                this.speed=90;
              }
          }else{
              this.speed += 5; // 放慢转动速度
              if(this.speed>200){
                this.speed=200;
              }
          }
          this.timer = setTimeout(this.startRoll, this.speed);//开始转动
        }
      },
      //清除转动
      clear(){
        clearTimeout(this.timer); // 清除转动定时器
        clearTimeout(this.lamp); // 清除灯光定时器
        this.lampShow = false; // 白色灯隐藏
        this.count = 0; // 转动跑格子次数初始化为0，可以开始下次抽奖
        this.startDraw=false;//正在抽奖置为否
      }
    }
  }
</script>

<style lang="scss" scoped>
::v-deep{
  .page-container{
    // background-color: #DCC6DB !important;
    padding-bottom: 0rpx;
  }
}
.sudoku{
  padding-bottom: 0rpx;
}
.preload1{
  background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/activity/lottery/v2/go.png') no-repeat;
}
.preload2{
  background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/activity/lottery/v2/zp-bg2.png') no-repeat;
}
.main{
  background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/activity/lottery/v2/bg.jpg') no-repeat;
  background-color: #E6BB8E;
  background-size: 100% auto;
  position: relative;
  min-height: 100vh;
  padding-top: 502rpx;
  padding-bottom: 132rpx;
  .zp-bg2{
    display: block;
    width: 0rpx;
    height: 0rpx;
  }
  .rule{
    position: absolute;
    top: 52rpx;
    right: 21rpx;
    display: flex;
    align-items: center;
    border: 2rpx solid #EEEEEE;
    color: white;
    border-radius: 1000rpx;
    font-size: 27rpx;
    padding: 10rpx 18rpx;
    .wenhao{
      margin-right: 6rpx;
      display: block;
    }
  }
  .rule-img{
    position: absolute;
    top: 52rpx;
    right: 21rpx;
  }
  .zp-box{
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
  }
  .zp-bk{
    width: 687rpx;
    height: 746rpx;
    background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/activity/lottery/v2/zp-bg1.png') no-repeat;
    background-size: 100% auto;
    margin: 0rpx;
    position: relative;
    &.active{
      background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/activity/lottery/v2/zhuanpan-no.png') no-repeat;
      background-size: 100% auto;
    }
    &.lampShow{
      background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/activity/lottery/v2/zp-bg2.png') no-repeat;
      background-size: 100% auto;
    }
    .gif-img{
      position: absolute;
      width: 680rpx;
      height: 610rpx;
      top:142rpx;
      left: 19rpx;
    }
    .title-box{
      position: absolute;
      width: 100%;
      margin-top: 0rpx;
      display: flex;
      justify-content: space-between;
      padding: 34rpx 70rpx 0rpx;
      .lottery-number{
        font-size: 36rpx;
        font-weight: bold;
        color: #bd8c5c;
        font-family: PingFang SC;
        line-height:43rpx;
      }
      .jiang-li{
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: 500;
        text-decoration: underline;
        color: #DC05A0;
        line-height: 43rpx;
        font-weight: bold;
      }
    }
    .cj-box{
      position: absolute;
      top: 126rpx;
      padding: 40rpx 36rpx;
      width: 100%;
      height: 620rpx;
      .prize-box{
        position: relative;
      }
      .prize{
        width: 204rpx;
        height: 174rpx;
        background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/activity/lottery/v2/good.png') no-repeat;
        background-size: 100% auto;
        position: absolute;
        text-align: center;
        &.active{
          background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/activity/lottery/v2/good-select.png') no-repeat;
          background-size: 100% auto;
        }
        .img{
          width: 160rpx;
          height: 100rpx;
          margin-top: 19rpx;
        }
        .name{
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #bd8c5c;
          line-height: 1;
          margin-top: -2rpx;
        }
      }
      .prize0 {left: 0rpx;top: 0rpx;}
      .prize1 {left: 204rpx;top: 0rpx;}
      .prize2 {left: 408rpx;top: 0rpx;}
      .prize3 {left: 408rpx;top: 180rpx;}
      .prize4 {left: 408rpx;top: 360rpx;}
      .prize5 {left: 204rpx;top: 360rpx;}
      .prize6 {left: 0rpx;top: 360rpx;}
      .prize7 {left: 0rpx;top: 180rpx;}
      .start-btn{
        background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/activity/lottery/v2/go-start.png') no-repeat;
        background-size: 100% auto;
        position: absolute;
        width: 192rpx;
        height: 168rpx;
        left: 211rpx;
        top: 186rpx;
        &.active{
          background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/activity/lottery/v2/go.png') no-repeat;
          background-size: 100% auto;
          position: absolute;
          width: 194rpx;
          height: 170rpx;
          left: 211rpx;
          top: 184rpx;
        }
      }
    }
  }
}
.winner-box{
  text-align: center;
  .title-box{
    display: inline-block;
    background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/activity/lottery/v2/title-btn.png') no-repeat;
    background-size: 100% 100%;
    min-width: 430rpx;
    height: 82rpx;
    line-height: 82rpx;
    border-radius: 1000rpx;
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FEFEFE;
    margin: 31rpx auto 52rpx;
    .people{
      color: rgba(255, 240, 0, 1);
    }
  }
  .winner-list{
    width: 707rpx;
    height: 481rpx;
    background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/activity/lottery/v2/winning.png') no-repeat;
    background-size: 100% auto;
    margin: auto;
    padding: 170rpx 73rpx 0rpx 60rpx;
    .winner-swiper{
      height: 260rpx;
      .swiper-item{
        display: flex;
        justify-content: space-between;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        line-height: 38rpx;
      }
      .swiper-box{
        margin-bottom: 30rpx;
      }
    }
  }
}
.popup-content{
  .popup{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
  }
  .popup-bg{
    background-color: rgba(0,0,0,0.6);
    width: 100%;
    height: 100%;
  }
  .popup-box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 580rpx;
    background-color: white;
    border-radius: 20rpx;
  }
  .close{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -120rpx;
  }
  .rule-box{
    padding: 60rpx 51rpx;
    .title-box{
      display: flex;
      align-items: center;
      justify-content: center;
      .title{
        font-weight: bold;
        color: #333333;
        font-size: 32rpx;
        margin: 0rpx 23rpx;
      }
    }
    .rule-txt{
      margin-top: 40rpx;
      word-wrap: break-word;
      word-break: break-all;
      white-space: pre-wrap;
      line-height: 2;
    }
  }
  .chance-box{
    padding: 60rpx 0rpx 30rpx;
    .title{
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      line-height: 48rpx;
      text-align: center;
      padding: 0rpx 66rpx;
    }
    .btn-box{
      display: flex;
      margin-top: 59rpx;
      justify-content: center;
      .btn{
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #666666;
        line-height: 1;
        height: 92rpx !important;
        line-height: 92rpx;
        border-radius: 1000rpx;
        border: 2rpx solid #CCCCCC;
        min-width: 240rpx;
        text-align: center;
      }
      .btn:first-child{
        margin-right: 32rpx;
      }
    }
  }
  .start-end{
    padding: 60rpx 0rpx 60rpx;
    .title{
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      line-height: 48rpx;
      text-align: center;
      padding: 0rpx 66rpx;
    }
    .btn-box{
      display: flex;
      margin-top: 59rpx;
      justify-content: center;
      .btn{
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #666666;
        line-height: 1;
        padding: 28rpx 100rpx;
        border-radius: 1000rpx;
        border: 2rpx solid #CCCCCC;
      }
    }
  }
  .system-box{
    text-align: center;
    padding: 60rpx 0rpx 67rpx;
    .title{
      font-weight: bold;
      color: #333333;
      line-height: 1;
      margin-top: 74rpx;
      font-size: 32rpx;
    }
  }
  .win-losing{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 593rpx;
    height: 653rpx;
    background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/activity/lottery/v2/youhuiquan.png') no-repeat;
    background-size: 100% auto;
    padding-left: 12rpx;
    .title-box{
      font-family: PingFang SC;
      color: #FFFFFF;
      margin-top: 50rpx;
      font-size: 60rpx;
      text-align: center;
      line-height: 70rpx;
    }
    .goods-box{
      width: 392rpx;
      height: 324rpx;
      margin: 74rpx auto 0rpx;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      .good-title{
        color: #bd8c5c;
        font-size: 24rpx;
        margin-top: 6rpx;
      }
      .btn-box{
        padding: 15rpx 50rpx;
        border-radius: 1000rpx;
        color: white;
        display: inline-block;
        margin-top: 20rpx;
        position: relative;
      }
    }
    .time-box{
      text-align: center;
      color: white;
      font-size: 22rpx;
      margin-top: 12rpx;
    }
  }
  .purple{
    border-radius: 1000rpx;
    border: none !important;
    color: white !important;
    background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/activity/lottery/v2/btn.png') no-repeat;
    background-size: 100% 100%;
    width: 178rpx !important;
    height: 66rpx !important;
    line-height: 66rpx;
    display: flex;
    align-items: center !important;
    justify-content: center;
    padding: 0rpx !important;
  }
}
</style>
